<template>
    <div style="height: 100%;width: 100%">
        <div id="cesiumContainer"></div>
        <div class=" slider-right">
            <div class="block">
                <span class="demonstration">Scale with Max Size</span>
                <el-checkbox v-model="cloudParameters.scaleWithMaximumSize"
                             @change="updateScaleWithMaximumSize"></el-checkbox>
            </div>
            <div class="block">
                <span class="demonstration">Scale X</span>
                <el-slider v-model="cloudParameters.scaleX" @change="updateScaleX"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">Scale Y</span>
                <el-slider v-model="cloudParameters.scaleY" @change="updateScaleY"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">Maximum Size X</span>
                <el-slider v-model="cloudParameters.maximumSizeX" @change="updateMaximumSizeX"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">Maximum Size Y</span>
                <el-slider v-model="cloudParameters.maximumSizeY" @change="updateMaximumSizeY"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">Maximum Size Z</span>
                <el-slider v-model="cloudParameters.maximumSizeZ" @change="updateMaximumSizeZ"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">Render Slice</span>
                <el-checkbox v-model="cloudParameters.renderSlice" @change="updateRenderSlice"></el-checkbox>
            </div>
            <div class="block">
                <span class="demonstration">Slice</span>
                <el-slider v-model="cloudParameters.slice" @change="updateSlice" :min="0" :max="1"
                           :step="0.01"></el-slider>
            </div>
            <div class="block">
                <span class="demonstration">Color</span>
                <el-select v-model="cloudParameters.color" placeholder="请选择" @change="updateCloudColor">
                    <el-option
                            v-for="item in cloudParameters.colors"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </div>
            <div class="block">
                <span class="demonstration">Brightness</span>
                <el-slider v-model="cloudParameters.brightness" @change="updateBrightness" :min="0"
                           :max="1" :step="0.01"></el-slider>
            </div>
        </div>
    </div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    export default {
        name: 'CumulusCloud',
        data() {
            return {
                show: true,
                focalDistance: 87,
                delta: 1,
                sigma: 3.78,
                stepSize: 2.46,
                cloudParameters: {
                    scaleWithMaximumSize: true,
                    scaleX: 25,
                    scaleY: 12,
                    maximumSizeX: 25,
                    maximumSizeY: 12,
                    maximumSizeZ: 15,
                    renderSlice: true, // if false, renders the entire surface of the ellipsoid
                    slice: 0.36,
                    brightness: 1.0,
                    color: "White",
                    colors: ["White", "Red", "Green", "Blue", "Yellow", "Gray"],
                }
            }
        },
        mounted() {
            this.initCesium();
            this.addCumulusCloud()
        },
        methods: {
            initCesium: function () {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: false,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: false,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    }),
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
                this.viewer.scene.globe.depthTestAgainstTerrain = true;
            },
            addCumulusCloud() {
                const scene = this.viewer.scene;

                const clouds = scene.primitives.add(
                    new Cesium.CloudCollection({
                        noiseDetail: 16.0,//噪音细节
                        noiseOffset: Cesium.Cartesian3.ZERO,//噪音偏移量
                        //debugBillboards:true,
                        //debugEllipsoids:true
                    })
                );

                //添加一个云
                this.cloud = clouds.add({
                    position: Cesium.Cartesian3.fromDegrees(//位置
                        103.0744619,
                        44.0503706,
                        2000
                    ),
                    scale: new Cesium.Cartesian2(//缩放比例
                        this.cloudParameters.scaleX,
                        this.cloudParameters.scaleY
                    ),
                    maximumSize: new Cesium.Cartesian3(//最大的尺寸
                        this.cloudParameters.maximumSizeX,
                        this.cloudParameters.maximumSizeY,
                        this.cloudParameters.maximumSizeZ//影响运程的厚度和深度
                    ),
                    color: this.getColor(this.cloudParameters.color),//云的颜色
                    slice: this.cloudParameters.renderSlice ? this.cloudParameters.slice : -1.0,//云的切割
                    brightness: this.cloudParameters.brightness,//亮度
                });
                this.viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(
                    103.0744619,
                    44.0503706,
                    2000
                ), new Cesium.Cartesian3(30, -90, -90));
            },
            getColor(colorName) {
                return Cesium.Color[colorName.toUpperCase()];
            },
            updateScaleWithMaximumSize(value) {
                if (value) {
                    this.cloudParameters.scaleX = this.cloudParameters.maximumSizeX;
                    this.cloudParameters.scaleY = this.cloudParameters.maximumSizeY;
                    // this.cloud.scale.x = this.cloudParameters.scaleX
                    // this.cloud.scale.y = this.cloudParameters.scaleY
                }
            },
            updateScaleX(value) {
                this.cloudParameters.scaleX = value
                this.cloud.scale = new Cesium.Cartesian2(value, this.cloud.scale.y);

            },
            updateScaleY(value) {
                this.cloudParameters.scaleY = value
                this.cloud.scale = new Cesium.Cartesian2(this.cloud.scale.x, value);
            },
            updateMaximumSizeX(value) {
                //this.cloudParameters.maximumSizeX = value
                this.cloud.maximumSize = new Cesium.Cartesian3(
                    value,
                    this.cloud.maximumSize.y,
                    this.cloud.maximumSize.z
                );
                if (this.cloudParameters.scaleWithMaximumSize) {
                    this.cloud.scale = new Cesium.Cartesian2(value, this.cloud.scale.y);
                }
            },
            updateMaximumSizeY(value) {
                this.cloudParameters.maximumSizeY = value
                //this.cloud.maximumSize.y = value
                this.cloud.maximumSize = new Cesium.Cartesian3(
                    this.cloud.maximumSize.x,
                    value,
                    this.cloud.maximumSize.z
                );
                if (this.cloudParameters.scaleWithMaximumSize) {
                    this.cloud.scale = new Cesium.Cartesian2(this.cloud.scale.x, value);
                }
            },
            updateMaximumSizeZ(value) {
                this.cloudParameters.maximumSizeZ = value
                //this.cloud.maximumSize.z = value
                this.cloud.maximumSize = new Cesium.Cartesian3(
                    this.cloud.maximumSize.x,
                    this.cloud.maximumSize.y,
                    value
                );
            },
            updateRenderSlice(value) {
                this.cloudParameters.renderSlice = value
                if (value) {
                    this.cloud.slice = Number(this.cloudParameters.slice);
                } else {
                    this.cloud.slice = -1.0;
                }
            },
            updateSlice(value) {
                this.cloudParameters.slice = value
                this.cloud.slice = value
            },
            updateCloudColor(value) {
                this.cloudParameters.color = value
                this.cloud.color = this.getColor(value)
            },
            updateBrightness(value) {
                this.cloudParameters.brightness = value
                this.cloud.brightness = value
            },

        }
    }
</script>

<style scoped>
    .slider-right {
        position: absolute;
        right: 100px;
        bottom: 200px;
        width: 200px;
        color: aqua;
    }
</style>